import React, { lazy, Suspense } from "react";
//引入封装好的底部导航
import Nav from "../components/vNav";
//引入封装好的样式
import "../assets/css/index.css";
//引入路由的插件
import { Switch, Route, Redirect } from "react-router-dom";
//引入要渲染的组件
// import Home from "../views/home";
// import Cate from "../views/cate";
// import Cart from "../views/cart";
// import Usercenter from "../views/usercenter";
const Home = lazy(() => import("../views/home"));
const Cate = lazy(() => import("../views/cate"));
const Cart = lazy(() => import("../views/cart"));
const Usercenter = lazy(() => import("../views/usercenter"));
class Index extends React.Component {
  render() {
    return (
      <div>
        {/* 
                路由导航
                */}
        <Nav></Nav>
        {/* 二级路由出口 */}
        <Suspense fallback={<div>加载中</div>}>
          <Switch>
            <Route path="/index/home" component={Home}></Route>
            <Route path="/index/cate" component={Cate}></Route>
            {/* <Route path="/index/cart" component={Cart}></Route> */}
            {/* 
            render 渲染函数
            结果要通过return 这个函数返回去出去
            */}
            <Route path="/index/cart" render={(props)=>{
              // props是路由的属性
              // console.log(props,'属性');
              //通过不同的权限来判断，它是否能够渲染这个购物车页面
              let type = sessionStorage.getItem('type')
              if(type==1){
                return <Cart {...props}></Cart>
              }else{
                return <div>对不起，您没有权限访问这个组件！！！！</div>
              }
            }}></Route>
            <Route path="/index/usercenter" component={Usercenter}></Route>
            <Redirect to="/index/home"></Redirect>
          </Switch>
        </Suspense>
      </div>
    );
  }
}
export default Index;
